<template>
  <div>
    <div class="bg"></div>
    <div class="big-box">
      <header>
        <div class="logo">
          <a href="javascript:;">
            <svg
              viewBox="0 0 140 38"
              class="logo headerLogo___22zuV"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill="#e74b3b"
                fill-rule="evenodd"
                d="M29.973 23.69h-2.302l-.918-3.016-.28-1.05-.28 1.077-.885 2.99h-2.31l-1.225-9.521h1.971l.62 5.378.146 1.472.348-1.321.867-2.896h1.58l.927 2.877.399 1.358.162-1.509.518-5.36h1.878l-1.216 9.522zm-9.147-4.881c-.01.25-.022.483-.038.702h-5.677c0 .42.059.788.175 1.106.116.318.28.586.492.801.213.215.468.38.765.492.298.113.627.169.99.169.42 0 .868-.035 1.348-.108a9.728 9.728 0 0 0 1.49-.351v1.817c-.22.07-.461.132-.722.188-.26.056-.527.106-.799.15a10.683 10.683 0 0 1-1.631.132c-.657 0-1.247-.104-1.768-.31a3.48 3.48 0 0 1-1.325-.914c-.363-.402-.64-.9-.834-1.494-.192-.593-.287-1.28-.287-2.062 0-.774.095-1.48.287-2.114a5.047 5.047 0 0 1 .816-1.63 3.652 3.652 0 0 1 1.28-1.05 3.754 3.754 0 0 1 1.678-.37c.612 0 1.152.105 1.622.314.47.21.865.502 1.182.877.317.374.558.822.722 1.34.164.518.247 1.087.247 1.705 0 .157-.004.36-.013.61zm-9.852 4.882H8.9v-6.205c0-1.042-.351-1.564-1.053-1.564-.351 0-.688.156-1.008.469-.32.312-.658.736-1.016 1.273v6.027H3.75V14.17h1.792l.052 1.406a6.4 6.4 0 0 1 .548-.666c.19-.2.396-.37.616-.511.222-.14.46-.248.714-.324.256-.074.542-.112.859-.112.442 0 .827.08 1.155.239.33.16.604.385.824.675.222.29.387.64.498 1.05.11.408.166.866.166 1.373v6.39zM24.2 5.377c13.16 7.532 15.582 15.063 7.272 22.597l1.256 4.652-5.442-1.448a54.183 54.183 0 0 1-3.086 1.9C8.066 42.313 0 37.695 0 19.228 0 .76 8.066-3.857 24.2 5.377zm-5.966 10.826a1.477 1.477 0 0 0-.543-.403 1.696 1.696 0 0 0-.668-.131c-.521 0-.95.192-1.283.576-.333.384-.532.927-.595 1.626h3.587c.005-.374-.038-.7-.128-.979a2.003 2.003 0 0 0-.37-.69zm43.66 4.178l-.203 2.88h-5.35l-.547 7.771c-.13 3.07-1.583 4.557-4.36 4.462h-2.478l.202-2.879h1.174c1.123.095 1.686-.478 1.688-1.726l.538-7.629h-5.742l.202-2.879h5.742l.233-3.31H46.6l.212-3.022h3.001a16.475 16.475 0 0 1-.74-4.319h3.524c-.023 1.537.182 2.975.609 4.319h3.393a14.775 14.775 0 0 0 1.217-4.319h3.523a18.248 18.248 0 0 1-1.348 4.319h2.871l-.213 3.022h-5.872l-.233 3.31h5.35zm2.67-16.408h6.785c2.343.097 4.455-.238 6.335-1.007l-.223 3.166c-1.612.673-3.46.961-5.541.864h-3.914l-.366 5.901h9.656l-.212 3.023h-2.871l-1.39 19.718H69.04l1.39-19.718h-3.001l-.64 9.067c-.11 5.279-2.066 8.971-5.869 11.083l.192-2.735c-2.69-1.342-3.968-4.174-3.837-8.492h3.131c-.21 2.975.327 5.231 1.611 6.765.502-.959.856-2.879 1.058-5.758l1.49-21.877zM48.27 24.843h3.002c-.319 4.512-2.403 7.534-6.25 9.067l.162-2.303c1.674-1.532 2.702-3.789 3.086-6.764zM62.807 5.557l-.212 3.022H47.98l.213-3.022h5.22L53.474 3h4.175l-.06 2.557h5.217zm38.502-2.591l-.65 9.212h7.308l-.223 3.166H86.997l-.314 4.462h16.049l-1.115 15.832H97.31l.893-12.666H86.46l-.142 2.015c-.04 5.469-2.867 9.211-8.489 11.227l.202-2.88c2.35-1.244 3.559-3.597 3.629-7.052l1.58-23.316h4.567l-.587 9.212h9.394l.65-9.212h4.044zm25.93 11.658h12.266l-1.074 15.257c-.098 3.837-1.879 5.66-5.343 5.47h-2.872l.202-2.88h1.828c1.479 0 2.227-.766 2.25-2.302l.882-12.522h-2.48c-.595 8.444-3.503 14.537-8.724 18.278l.243-3.454c2.765-3.453 4.418-8.394 4.959-14.824h-3.262c-.67 8.254-3.574 14.298-8.716 18.135l.233-3.31c2.867-3.646 4.52-8.587 4.959-14.825h-2.087l.212-3.023c4.311-1.918 8.086-5.852 11.328-8.635h-9.917l.213-3.023h16.571l-.214 3.023c-4.058 3.262-7.877 7.196-11.457 8.635zm-7.866 11.659l-.213 3.022a31.578 31.578 0 0 1-10.25 2.879l.253-3.599c1.13 0 2.229-.143 3.293-.432l1.095-15.544h-3.001l.213-3.023h3l.467-6.62h3.914l-.467 6.62h2.74l-.212 3.023h-2.74l-1.033 14.682c.888-.289 1.87-.624 2.94-1.008z"
              ></path>
            </svg>
          </a>
          <span>|</span>
          <span>通行证</span>
        </div>
      </header>
      <main>
        <div class="main-box">
          <div class="top-tip">
            <a href="javascript:;">
              <svg
                viewBox="0 0 140 38"
                class="logo headerLogo___22zuV"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="#e74b3b"
                  fill-rule="evenodd"
                  d="M29.973 23.69h-2.302l-.918-3.016-.28-1.05-.28 1.077-.885 2.99h-2.31l-1.225-9.521h1.971l.62 5.378.146 1.472.348-1.321.867-2.896h1.58l.927 2.877.399 1.358.162-1.509.518-5.36h1.878l-1.216 9.522zm-9.147-4.881c-.01.25-.022.483-.038.702h-5.677c0 .42.059.788.175 1.106.116.318.28.586.492.801.213.215.468.38.765.492.298.113.627.169.99.169.42 0 .868-.035 1.348-.108a9.728 9.728 0 0 0 1.49-.351v1.817c-.22.07-.461.132-.722.188-.26.056-.527.106-.799.15a10.683 10.683 0 0 1-1.631.132c-.657 0-1.247-.104-1.768-.31a3.48 3.48 0 0 1-1.325-.914c-.363-.402-.64-.9-.834-1.494-.192-.593-.287-1.28-.287-2.062 0-.774.095-1.48.287-2.114a5.047 5.047 0 0 1 .816-1.63 3.652 3.652 0 0 1 1.28-1.05 3.754 3.754 0 0 1 1.678-.37c.612 0 1.152.105 1.622.314.47.21.865.502 1.182.877.317.374.558.822.722 1.34.164.518.247 1.087.247 1.705 0 .157-.004.36-.013.61zm-9.852 4.882H8.9v-6.205c0-1.042-.351-1.564-1.053-1.564-.351 0-.688.156-1.008.469-.32.312-.658.736-1.016 1.273v6.027H3.75V14.17h1.792l.052 1.406a6.4 6.4 0 0 1 .548-.666c.19-.2.396-.37.616-.511.222-.14.46-.248.714-.324.256-.074.542-.112.859-.112.442 0 .827.08 1.155.239.33.16.604.385.824.675.222.29.387.64.498 1.05.11.408.166.866.166 1.373v6.39zM24.2 5.377c13.16 7.532 15.582 15.063 7.272 22.597l1.256 4.652-5.442-1.448a54.183 54.183 0 0 1-3.086 1.9C8.066 42.313 0 37.695 0 19.228 0 .76 8.066-3.857 24.2 5.377zm-5.966 10.826a1.477 1.477 0 0 0-.543-.403 1.696 1.696 0 0 0-.668-.131c-.521 0-.95.192-1.283.576-.333.384-.532.927-.595 1.626h3.587c.005-.374-.038-.7-.128-.979a2.003 2.003 0 0 0-.37-.69zm43.66 4.178l-.203 2.88h-5.35l-.547 7.771c-.13 3.07-1.583 4.557-4.36 4.462h-2.478l.202-2.879h1.174c1.123.095 1.686-.478 1.688-1.726l.538-7.629h-5.742l.202-2.879h5.742l.233-3.31H46.6l.212-3.022h3.001a16.475 16.475 0 0 1-.74-4.319h3.524c-.023 1.537.182 2.975.609 4.319h3.393a14.775 14.775 0 0 0 1.217-4.319h3.523a18.248 18.248 0 0 1-1.348 4.319h2.871l-.213 3.022h-5.872l-.233 3.31h5.35zm2.67-16.408h6.785c2.343.097 4.455-.238 6.335-1.007l-.223 3.166c-1.612.673-3.46.961-5.541.864h-3.914l-.366 5.901h9.656l-.212 3.023h-2.871l-1.39 19.718H69.04l1.39-19.718h-3.001l-.64 9.067c-.11 5.279-2.066 8.971-5.869 11.083l.192-2.735c-2.69-1.342-3.968-4.174-3.837-8.492h3.131c-.21 2.975.327 5.231 1.611 6.765.502-.959.856-2.879 1.058-5.758l1.49-21.877zM48.27 24.843h3.002c-.319 4.512-2.403 7.534-6.25 9.067l.162-2.303c1.674-1.532 2.702-3.789 3.086-6.764zM62.807 5.557l-.212 3.022H47.98l.213-3.022h5.22L53.474 3h4.175l-.06 2.557h5.217zm38.502-2.591l-.65 9.212h7.308l-.223 3.166H86.997l-.314 4.462h16.049l-1.115 15.832H97.31l.893-12.666H86.46l-.142 2.015c-.04 5.469-2.867 9.211-8.489 11.227l.202-2.88c2.35-1.244 3.559-3.597 3.629-7.052l1.58-23.316h4.567l-.587 9.212h9.394l.65-9.212h4.044zm25.93 11.658h12.266l-1.074 15.257c-.098 3.837-1.879 5.66-5.343 5.47h-2.872l.202-2.88h1.828c1.479 0 2.227-.766 2.25-2.302l.882-12.522h-2.48c-.595 8.444-3.503 14.537-8.724 18.278l.243-3.454c2.765-3.453 4.418-8.394 4.959-14.824h-3.262c-.67 8.254-3.574 14.298-8.716 18.135l.233-3.31c2.867-3.646 4.52-8.587 4.959-14.825h-2.087l.212-3.023c4.311-1.918 8.086-5.852 11.328-8.635h-9.917l.213-3.023h16.571l-.214 3.023c-4.058 3.262-7.877 7.196-11.457 8.635zm-7.866 11.659l-.213 3.022a31.578 31.578 0 0 1-10.25 2.879l.253-3.599c1.13 0 2.229-.143 3.293-.432l1.095-15.544h-3.001l.213-3.023h3l.467-6.62h3.914l-.467 6.62h2.74l-.212 3.023h-2.74l-1.033 14.682c.888-.289 1.87-.624 2.94-1.008z"
                ></path>
              </svg>
            </a>
            <p>与百万创作人一起成长</p>
          </div>
          <div class="bot-login">
            <div class="login">
              <div class="loginToggle">
                <span @click="toggle(0)" :class="index == 0 ? 'active' : ''"
                  >密码登录</span
                >
                <span @click="toggle(1)" :class="index == 1 ? 'active' : ''"
                  >短信登录</span
                >
              </div>
              <div class="inp-box">
                <input type="text" placeholder="手机号" v-model="v1" />
                <div class="password-box">
                  <input type="password" placeholder="密码" v-model="v2" />
                  <span></span>
                </div>
                <button class="loginBtn" @click="loginFn">登录</button>
                <p>忘记密码</p>
              </div>
            </div>
            <div class="toggle">
              <p>没有账号？注册</p>
            </div>
          </div>
        </div>
      </main>
      <footer>
        <p>
          ©2020
          <a href="javascript:;">新片场</a>
          <a href="javascript:;"> · 京ICP备14003808号-1</a>
        </p>
      </footer>
    </div>
  </div>
</template>

<script>
let user = {
    account:"123",
    password: "123",
    token: "bhacnakjskankncdjka"
}
export default {
  name: "Login",
  data() {
    return {
      index: 0,
      v1: "",
      v2: "",
    };
  },
  methods: {
    toggle(i) {
      this.index = i;
    },
    loginFn() {
      if (this.v1.length == 0 || this.v2.length == 0) {
        this.$alert("输入框不能为空！", {
          confirmButtonText: "确定",
          confirmButtonClass: "btnBg",
          type: 'warning',
        });
        return false;
      }
      if (this.v1 == user["account"]) {
        if (this.v2 == user["password"]) {
          localStorage.userToken = user["token"];
          this.$store.state.token = user["token"];
          this.$router.push({ path: "/" });
        } else {
          this.$alert("密码错误！", {
          confirmButtonText: "确定",
          confirmButtonClass: "btnBg",
          type: 'warning',
        });
        }
      } else {
          this.$alert("账号错误！", {
          confirmButtonText: "确定",
          confirmButtonClass: "btnBg",
          type: 'warning',
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$topColor: #e74b3b;
.bg {
  background-image: url(../assets/images/login-bg.jpg);
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.big-box {
  header {
    height: 96px;
    display: flex;
    align-items: center;
    padding: 0 50px;
    .logo {
      a {
        svg {
          width: 94px;
          vertical-align: middle;
          path {
            fill: white;
          }
        }
      }
      span:nth-child(2) {
        color: #fff;
        font-size: 22px;
        font-weight: 100;
        vertical-align: bottom;
        padding: 0 14px;
      }
      span:nth-child(3) {
        color: #fff;
        font-size: 24px;
        vertical-align: bottom;
      }
    }
  }
  main {
    .main-box {
      width: 360px;
      margin: 0 auto;
      .top-tip {
        a {
          display: block;
          text-align: center;
          svg {
            width: 110px;
            path {
              fill: white;
            }
          }
        }
        p {
          margin: 12px 0 32px 0;
          letter-spacing: 16px;
          color: #fff;
          font-size: 18px;
          text-align: center;
        }
      }
      .bot-login {
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 6px;
        overflow: hidden;
        .login {
          padding: 30px 30px 40px 30px;
          .loginToggle {
            display: flex;
            justify-content: space-around;
            margin-bottom: 16px;
            span {
              padding: 10px 12px;
              cursor: pointer;
              &.active {
                color: $topColor;
                border-bottom: 2px solid $topColor;
              }
              &:hover {
                color: $topColor;
              }
            }
          }
          .inp-box {
            input[type="text"] {
              width: 100%;
              height: 34px;
              border: 1px solid #ccc;
              border-radius: 2px;
              outline: none;
              text-indent: 8px;
              margin-bottom: 20px;
              &::-webkit-input-placeholder {
                font-size: 14px;
                color: #bbb;
              }
            }
            .password-box {
              input[type="password"] {
                width: 100%;
                height: 34px;
                border: 1px solid #ccc;
                border-radius: 2px;
                outline: none;
                text-indent: 8px;
                margin-bottom: 18px;
                &::-webkit-input-placeholder {
                  font-size: 14px;
                  color: #bbb;
                }
              }
            }
            .loginBtn {
              width: 100%;
              height: 38px;
              line-height: 38px;
              border: none;
              background-color: $topColor;
              color: #fff;
              font-size: 16px;
              letter-spacing: 8px;
              border-radius: 3px;
              margin-bottom: 18px;
              cursor: pointer;
              &:hover {
                background-color: #fd6757;
              }
            }
            p {
              text-align: right;
              color: #999;
              font-size: 14px;
              cursor: pointer;
            }
          }
        }
        .toggle {
          background-color: #fafafa;
          border-top: 1px solid #f0f0f0;
          padding: 14px 0;
          p {
            text-align: center;
            color: #9e9e9e;
            font-size: 14px;
            cursor: pointer;
            &:hover {
              color: $topColor;
            }
          }
        }
      }
    }
  }
  footer {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 24px 0;
    width: 100%;
    p {
      color: #fff;
      text-align: center;
      font-size: 12px;
      a {
        color: #fff;
      }
    }
  }
}
</style>